<template>
  <div>
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px" size="medium"
      @submit.native.prevent>
      <div>
        <div class="record-title">SCL-90测评纸</div>
      </div>
      <div class="record-title" style="font-size: 18px;">统计表</div>
      <div class="table-container">
        <table class="table-layout center">
          <tbody>
            <tr>
              <td class="table-cell" colspan="2">F1(12)
              </td>
              <td class="table-cell" colspan="2">F2(10)
              </td>
              <td class="table-cell" colspan="2">F3(9)
              </td>
              <td class="table-cell" colspan="2">F4(13)
              </td>
              <td class="table-cell" colspan="2">F5(10)
              </td>
            </tr>
            <tr>
              <td class="table-cell">项目
              </td>
              <td class="table-cell">评分
              </td>
              <td class="table-cell">项目
              </td>
              <td class="table-cell">评分
              </td>
              <td class="table-cell">项目
              </td>
              <td class="table-cell">评分
              </td>
              <td class="table-cell">项目
              </td>
              <td class="table-cell">评分
              </td>
              <td class="table-cell">项目
              </td>
              <td class="table-cell">评分
              </td>
            </tr>
            <tr>
              <td class="table-cell">1<br>
                4<br>
                12<br>
                27<br>
                40<br>
                42<br>
                48<br>
                49<br>
                52<br>
                53<br>
                56<br>
                58
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">3<br>
                9<br>
                10<br>
                28<br>
                38<br>
                45<br>
                46<br>
                51<br>
                55<br>
                65<br>
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">6<br>
                21<br>
                34<br>
                36<br>
                37<br>
                41<br>
                61<br>
                69<br>
                73
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">5<br>
                14<br>
                15<br>
                20<br>
                22<br>
                26<br>
                29<br>
                30<br>
                31<br>
                32<br>
                54<br>
                71<br>
                79
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
                2<br>
                17<br>
                23<br>
                33<br>
                39<br>
                57<br>
                72<br>
                78<br>
                80<br>
                86
              </td>
              <td class="table-cell">
              </td>
            </tr>
            <tr>
              <td class="table-cell">总分
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">总分
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">总分
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">总分
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">总分
              </td>
              <td class="table-cell">
              </td>
            </tr>
            <tr>
              <td class="table-cell" colspan="2">F6(6)
              </td>
              <td class="table-cell" colspan="2">F7(7)
              </td>
              <td class="table-cell" colspan="2">F8(6)
              </td>
              <td class="table-cell" colspan="2">F9(10)
              </td>
              <td class="table-cell" colspan="2">F10(7)
              </td>
            </tr>
            <tr>
              <td class="table-cell">项目
              </td>
              <td class="table-cell">评分
              </td>
              <td class="table-cell">项目
              </td>
              <td class="table-cell">评分
              </td>
              <td class="table-cell">项目
              </td>
              <td class="table-cell">评分
              </td>
              <td class="table-cell">项目
              </td>
              <td class="table-cell">评分
              </td>
              <td class="table-cell">项目
              </td>
              <td class="table-cell">评分
              </td>
            </tr>
            <tr>
              <td class="table-cell">11<br>
                24<br>
                63<br>
                67<br>
                74<br>
                81
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">13<br>
                25<br>
                47<br>
                50<br>
                70<br>
                75<br>
                82
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">8<br>
                18<br>
                43<br>
                68<br>
                76<br>
                83
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">7<br>
                16<br>
                35<br>
                62<br>
                77<br>
                84<br>
                85<br>
                87<br>
                88<br>
                90
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">19<br>
                44<br>
                59<br>
                60<br>
                64<br>
                66<br>
                89
              </td>
              <td class="table-cell">
              </td>
            </tr>
            <tr>
              <td class="table-cell">总分
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">总分
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">总分
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">总分
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">总分
              </td>
              <td class="table-cell">
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="record-title" style="font-size: 18px;">结果处理</div>
      <div class="table-container">
        <table class="table-layout center">
          <tbody>
            <tr>
              <td class="table-cell">因素
              </td>
              <td class="table-cell">F1
              </td>
              <td class="table-cell">F2
              </td>
              <td class="table-cell">F3
              </td>
              <td class="table-cell">F4
              </td>
              <td class="table-cell">F5
              </td>
              <td class="table-cell">F6
              </td>
              <td class="table-cell">F7
              </td>
              <td class="table-cell">F8
              </td>
              <td class="table-cell">F9
              </td>
              <td class="table-cell">F10
              </td>
            </tr>
            <tr>
              <td class="table-cell">分÷项
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
            </tr>
            <tr>
              <td class="table-cell">T分
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
              <td class="table-cell">
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="footer center" style="margin-bottom: 40px;margin-top: 10px;">
        <el-form-item label="阳性项：" label-width="80px">
          (<input class="yangxingxianginput" type="text" placeholder="请输入">)
          <input class="yangxingxianginput yangxingxianginputb" type="text" placeholder="请输入">
          (<input class="yangxingxianginput" type="text" placeholder="请输入">)
          <input class="yangxingxianginput yangxingxianginputb" type="text" placeholder="请输入">
          (<input class="yangxingxianginput" type="text" placeholder="请输入">)
          <input class="yangxingxianginput yangxingxianginputb" type="text" placeholder="请输入">
          (<input class="yangxingxianginput" type="text" placeholder="请输入">)
          <input class="yangxingxianginput yangxingxianginputb" type="text" placeholder="请输入">
          (<input class="yangxingxianginput" type="text" placeholder="请输入">)
          <input class="yangxingxianginput yangxingxianginputb" type="text" placeholder="请输入"><br>
          (<input class="yangxingxianginput" type="text" placeholder="请输入">)
          <input class="yangxingxianginput yangxingxianginputb" type="text" placeholder="请输入">
          (<input class="yangxingxianginput" type="text" placeholder="请输入">)
          <input class="yangxingxianginput yangxingxianginputb" type="text" placeholder="请输入">
          (<input class="yangxingxianginput" type="text" placeholder="请输入">)
          <input class="yangxingxianginput yangxingxianginputb" type="text" placeholder="请输入">
          (<input class="yangxingxianginput" type="text" placeholder="请输入">)
          <input class="yangxingxianginput yangxingxianginputb" type="text" placeholder="请输入">
          (<input class="yangxingxianginput" type="text" placeholder="请输入">)
          <input class="yangxingxianginput yangxingxianginputb" type="text" placeholder="请输入"><br>
        </el-form-item>
        <el-form-item label="阳性项目总数：" label-width="130px">
          <input type="text" placeholder="请输入">
        </el-form-item>
        <el-form-item label="诊断结果分析：" label-width="130px">
          <input type="text" placeholder="请输入">
        </el-form-item>
      </div>
      <div class="footer center" style="margin-bottom: 40px;margin-top: 10px; float: right;">
        <el-form-item label="医生签名：" label-width="100px">
          <input type="text" placeholder="请输入">
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      formData: {

      },
      formData: {

      },
      rules: {
        radio42718: [{
          required: true,
          message: '字段值不可为空',
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
.center {
  width: 80%;
  margin: 0 auto;
}

.record-title {
  font-size: 27px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

div.table-container {
  table.table-layout {
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;

    td.table-cell {
      display: table-cell;
      height: 38px;
      border: 1px solid #333;
      font-size: 16px;
      overflow-wrap: break-word;
    }
  }
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 16px;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

.static-content-item-head {
  min-height: 20px;
  font-size: 15px;
  display: flex;
  // justify-content: space-around;
  justify-content: space-between;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

.yangxingxianginput {
  width: 50px !important;
  text-align: center;
}
.yangxingxianginputb {
  border-bottom: 1px solid #333;
}

::v-deep .el-divider--horizontal {
  margin: 0;
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

::v-deep .el-form-item__label {
  font-size: 16px;
}

.el-form-item {
  margin-bottom: 0px;
}

.footer {
  font-size: 20px;

  input {
    text-align: left;
    width: 40%;
  }
}

//宽度
.w-50 {
  width: 50px;
}

.w-100 {
  width: 100px;
}

.w-150 {
  width: 150px;
}

.w-200 {
  width: 200px;
}

// 去除input样式
input {
  border: none;
  text-align: center;
  width: 100%;
}

input[type=text]:focus {
  outline: none;
}

input::placeholder {
  color: #ccc;
  text-align: center;
  /* 设置 placeholder 颜色为灰色 */
}



.textareaStyle {
  width: 100%;
  height: 93%;
  margin-top: 10px;
}

textarea {
  border: none;
  text-align: center;
  width: 100%;
}

textarea[type=text]:focus {
  outline: none;
}

textarea::placeholder {
  color: #ccc;
  /* 设置 placeholder 颜色为灰色 */
}
</style>
